<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
    <!-- Title of your app -->
    <title>LED</title>

    <!-- Fit the app in phone's screen -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">

    <!-- Linking styles to our app -->
    <link rel="stylesheet" type="text/css" href="css/styles.css">

    <!-- Link scripts -->
    <script type="text/javascript" src="js/lib/nexpaqAPI.js"></script>
    <script type="text/javascript" src="js/lib/DevMod_Object.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
</head>

<body>
    <!-- App header -->
    <h1>LED</h1>

    <div class="onOffButton">
        <input type="checkbox" id="onOffButton" name="check" value="None" onChange="updateLED()" />
        <label for="onOffButton"></label>
    </div>

</body>
</html>

body {
    padding: 70px 0 0;
    margin: 0;
    font-size: 16px;
    font-family: sans-serif;
    text-align: center;
    background-color: #00B2A9;
}

h1 {
    font-size: 2em;
    line-height: 2.5em;
    margin: 0;
    background-color: black;
    color: #FF2E8A;
    text-transform: uppercase;
}

input[type=checkbox] {
    visibility: hidden;
}
.onOffButton {
  width: 60px;
  height: 60px;
  position: relative;
  margin: 20px auto;
  background: #C0C0C0;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.onOffButton label {
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    left: 5px;
    top: 5px;
    background: #202020;
    border-radius: 50px;
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
}
.onOffButton label:before,
.onOffButton label:after {
      width: 46px;
      height: 46px;
      position: absolute;
      top: 2px;
      left: 2px;
      visibility:visible ;
      line-height: 46px;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.onOffButton label:before {
      content: 'OFF';
      color: #F08000;
      background: #402000;

}
.onOffButton label:after {
      content: 'ON';
      background: #F08000;
      visibility: hidden;
}
.onOffButton input[type=checkbox]:checked + label:after {
    visibility: visible;
}
.onOffButton input[type=checkbox]:checked + label:before {
    visibility: hidden;
}
nexpaqAPI.setCurrentModule('DevMod');

function toggleButton() {
    // check physical button status
    var buttonStatus = document.getElementById('onOffButton').checked;
    if (buttonStatus) {
        document.getElementById('onOffButton').setAttribute('checked', 'false');
    } else {
        document.getElementById('onOffButton').setAttribute('checked', 'true');
    }
    document.getElementById('onOffButton').click();
}

// Actions when click button 
function updateLED() {
    if (document.getElementById('onOffButton').checked) {
        // If button checked, turn LEDs on 
        window.nexpaqAPI.DevMod.send("RGB_LED", [255, 255, 255]);
    } else {
        // If button not checked, turn off
        window.nexpaqAPI.DevMod.send("RGB_LED", [0, 0, 0]);
    }
}

function dataHandler() {
    var commandType = window.nexpaqAPI.DevMod.last_data.cmdType;
    switch (parseInt(commandType)) {
    default:
        toggleButton();
        break;
    }
}

// when page is finished loading
document.addEventListener("DOMContentLoaded", function (e) {
    updateLED();
    // call dataHandler function whenever data is received
    window.nexpaqAPI.DevMod.addEventListener("onDataReceived", dataHandler);
});
Rerun